import Taro from '@tarojs/taro'
import {Image, Text, View} from '@tarojs/components'

import './footerMenu.scss'
import menu_01 from "../assets/img/menu_01.png";
import menu_01_on from "../assets/img/menu_01_on.png";
import menu_02 from "../assets/img/menu_02.png";
import menu_02_on from "../assets/img/menu_02_on.png";
import menu_03 from "../assets/img/menu_03.png";
import menu_03_on from "../assets/img/menu_03_on.png";
import menu_04 from "../assets/img/menu_04.png";
import menu_04_on from "../assets/img/menu_04_on.png";
import * as getRuntime from "../utils/common";

export default class FooterMenu extends Taro.Component{
  state = {
    currentMenu: 'index',
    menu: [
      {
        title: '首页',
        name: 'index',
        icon: menu_01,
        icon_on: menu_01_on,
        url: '/pages/index/index',
        isLogin: false
      },
      {
        title: '鱼塘',
        name: 'order',
        icon: menu_02,
        icon_on: menu_02_on,
        url: '/pages/mine/fish',
        isLogin: true
      },
      {
        title: '收益',
        name: 'profit',
        icon: menu_03,
        icon_on: menu_03_on,
        url: '/pages/mine/profit',
        isLogin: true
      },
      {
        title: '我的',
        name: 'mine',
        icon: menu_04,
        icon_on: menu_04_on,
        url: '/pages/mine/mine',
        isLogin: true
      }
    ]
  }

  componentWillMount(): void {
    this.setState({ currentMenu: this.props.menu })
  }

  link = (url: string = '/pages/index/index'): void => {
    getRuntime.navigateTo(url)
  }

  render() {
    let { currentMenu, menu } = this.state
    return(
      <View className='footer-menu'>
        {
          menu.map((item, index) => {
            return(
              <View className={currentMenu===item.name?'footer-menu_menu footer-menu_menu_active':'footer-menu_menu'}
                    onClick={this.link.bind(this, item.url)} >
                {currentMenu === item.name && <Image className='footer-menu__icon' src={item.icon_on} />}
                {currentMenu !== item.name && <Image className='footer-menu__icon' src={item.icon} />}
                <Text className='footer-menu__title'>{item.title}</Text>
              </View>
            )
          })
        }
      </View>
    )
  }
}
